<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/static/lib/vue.js"></script>
    <script src="/static/lib/datav.map.vue.js"></script>
    <link rel="stylesheet" href="/static/lib/common.css">
    <link rel="stylesheet" href="/static/lib/button.css">
    <title>百科荣创-无人驾驶</title>
</head>

<body>

    <div id="app">
        <dv-full-screen-container>
            <div style="margin-bottom: 10px;display: flex;justify-content: center;margin-top: 50px;">
                <dv-decoration-1 style="width:15%;height:50px;margin-right: 10px;transform:rotate(180deg);">
                </dv-decoration-1>
                <h1 style="width:35%; font-size: 40px; text-align: center;color: aliceblue;font-weight: 600;">自动驾驶 —
                    智慧交通</h1>
                <dv-decoration-1 style="width:15%;height:50px;margin-left: 10px;"></dv-decoration-1>
                <a href="/AutoCar" class="button button-primary button-rounded button-large"
                    style="position: absolute; right:20px;">切换无人车视图模式</a>
            </div>

            <div style="margin-bottom: 10px;display: flex;justify-content: space-around;">
                <div style="width: 49%;">
                    <dv-decoration-11
                        style="margin:auto;width:250px;height:45px;color:aliceblue;font-size: 17px;font-weight: 400;">
                        &nbsp;&nbsp;云台摄像头图像&nbsp;&nbsp;</dv-decoration-11>
                    <dv-border-box-1 style="width:90%;margin:auto;height:430px;text-align: center;margin-bottom: 20px;">
                        <img src="/videostreamIpc/"
                            style="width:90%;height:85%;object-fit:fill;margin-top: 40px;"/>
                    </dv-border-box-1>
                    <dv-border-box-8 style="width:90%;margin:auto;height:470px;text-align: center;margin-top: 24px;">
                        <div style="text-align: left;color: aliceblue;padding: 20px;padding-bottom: 0;font-size: 16px;">
                            本地摄像头图像：</div>
                            <img src="/videostreamCsi/"
                            style="width:90%;height:85%;object-fit:fill;margin-top: 10px;" />
                    </dv-border-box-8>
                </div>
                <dv-decoration-2 :reverse="true" style="width:3px;margin-left:-40px;margin-right:10px;height:980px;">
                </dv-decoration-2>
                <div style="width: 49%;">
                    <dv-border-box-10 :reverse="true"
                        style="width:110%;margin:auto;height:315px;text-align: center;margin-bottom: 20px;margin-top: 10px;">
                        <div style="color: aliceblue;font-size: 30px;padding-top: 20px;">
                            <div style="width: 50%;float: left;font-size: 20px;text-align: center;">
                                <div id="connect-msg" style="text-align: left;padding-left: 20px;line-height: 1.4;">
                                    <div style="float: left;width: 50%;">连接状况:<span>未知</span></div>
                                    <div style="float: left;width: 50%;">&nbsp;</div>
                                    <div style="float: left;width: 50%;">无人车插件:<span>未知</span></div>
                                    <div style="float: left;width: 50%;">大赛插件:<span>未知</span></div>
                                    <div style="float: left;width: 50%;">串口插件:<span>未知</span></div>
                                    <div style="float: left;width: 50%;">串口状态:<span>未知</span></div>
                                </div>
                                <div style="margin-top: 70px;padding: 20px;padding-bottom: 0;padding-right: 35px;">
                                    <div msg="model-btn"
                                        class="button button-block button-rounded button-primary button-large">连接查询
                                    </div>
                                </div>

                                <dv-border-box-8 style="height:134px;margin: 5px 20px; width: 90%;margin-top: 10px;">
                                    <div style="font-size: 16px;text-align: left;padding: 10px;padding-bottom: 0px;">
                                        任务执行：</div>
                                    <div style="margin-top: 5px;">
                                        <button class="flag-btn button button-3d button-box button-jumbo" msg="car-task1">任务一</button>
                                        <button class="flag-btn button button-3d button-box button-jumbo" msg="car-task2">任务二</button>
                                        <button class="flag-btn button button-3d button-box button-jumbo">计时开启</button>
                                        <button class="flag-btn button button-3d button-box button-jumbo">计时复位</button>
                                    </div>
                                </dv-border-box-8>
                            </div>
                            <div style="width: 50%;float: left;">
                                <dv-border-box-7 style="width: 80%;height: 280px;">
                                    <div style="text-align: left;font-size: 16px;padding: 10px;">运行日志：</div>
                                    <div id="log-div"
                                        style="overflow-y: scroll;font-size: 16px;height: 230px;text-align: left;padding-left: 20px;">
                                    </div>
                                </dv-border-box-7>
                            </div>
                        </div>
                    </dv-border-box-10>
                    <dv-decoration-2 style="width:100%;height:5px;margin-bottom: 15px;transform:rotate(180deg);">
                    </dv-decoration-2>
                    <dv-border-box-10 :reverse="true"
                        style="width:110%;margin:auto;height:600px;text-align: center;margin-bottom: 20px;">

                        <dv-border-box-12
                            style="width:465px;height:272px;padding-top: 20px;position: absolute;top: 10px;left: 10px;">
                            <div style="text-align: left;color: aliceblue;margin-left: 20px;">运动控制：</div>
                            <div style="margin-top: 10px;">
                                <button class="button button-3d button-circle button-jumbo" msg="car-u">↑</button>
                            </div>
                            <div style="margin-top: 15px;">
                                <button class="button button-3d button-circle button-jumbo" msg="car-l"
                                    style="margin-right: 10px;">←</button>
                                <button class="button button-3d button-circle button-jumbo" msg="car-s"
                                    style="font-size:18px;">stop</button>
                                <button class="button button-3d button-circle button-jumbo" msg="car-r"
                                    style="margin-left: 10px;">→</button>
                            </div>
                            <div style="margin-top: 15px;">
                                <button class="button button-3d button-circle button-jumbo" msg="car-d">↓</button>
                            </div>

                        </dv-border-box-12>
                        <dv-border-box-12
                            style="width:465px;height:272px;padding-top: 20px;position: absolute;top: 10px;left: 480px;">
                            <div style="text-align: left;color: aliceblue;margin-left: 20px;">码盘/速度设置：</div>
                            <div>
                                <input type="range" min="1" max="99" id="speed"
                                    style="float: left;-webkit-transform:rotate(270deg); margin-top: 100px;margin-left: 20px;">
                                <div
                                    style="color: aliceblue;font-size: 20px;margin-top: 10px;position: absolute;left:130px;top:50px;">
                                    速度值：
                                    <div id="speed-val">0</div>
                                </div>
                                <input type="range" min="0" max="5000" id="range"
                                    style="float: left;-webkit-transform:rotate(270deg); margin-top: 100px;margin-left: 20px;">
                                <div
                                    style="color: aliceblue;font-size: 20px;margin-top: 10px;position: absolute;left:300px;top:50px;">
                                    码盘值：
                                    <div id="range-val">0</div>
                                </div>
                            </div>
                        </dv-border-box-12>
                        <dv-border-box-12
                            style="width:465px;height:272px;padding-top: 20px;position: absolute;top: 302px;left: 10px;">
                            <div style="text-align: left;color: aliceblue;margin-left: 20px;">云台控制：</div>
                            <div style="margin-top: 10px;">
                                <button class="button button-3d button-circle button-jumbo" msg="yun-u">↑</button>
                            </div>
                            <div style="margin-top: 15px;">
                                <button class="button button-3d button-circle button-jumbo" msg="yun-l"
                                    style="margin-right: 10px;">←</button>
                                <button class="button button-3d button-circle button-jumbo" msg="yun-c"
                                    style="font-size:18px;">reset</button>
                                <button class="button button-3d button-circle button-jumbo" msg="yun-r"
                                    style="margin-left: 10px;">→</button>
                            </div>
                            <div style="margin-top: 15px;">
                                <button class="button button-3d button-circle button-jumbo" msg="yun-d">↓</button>
                            </div>
                        </dv-border-box-12>
                        <dv-border-box-12
                            style="width:465px;height:272px;padding-top: 20px;position: absolute;top: 302px;left: 480px;">
                            <div style="text-align: left;color: aliceblue;margin-left: 20px;">标志物控制：</div>
                            <div>
                                <button class="flag-btn button button-3d button-box button-jumbo">车库一层</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">车库二层</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">车库三层</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">车库四层</button>
                            </div>
                            <div>
                                <button class="flag-btn button button-3d button-box button-jumbo">调光一档</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">调光二档</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">调光三档</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">调光四档</button>
                            </div>
                            <div>
                                <button class="flag-btn button button-3d button-box button-jumbo">警报开启</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">无线充电</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">道闸开启</button>
                                <button class="flag-btn button button-3d button-box button-jumbo">ETC开启</button>
                            </div>

                        </dv-border-box-12>

                    </dv-border-box-10>

                </div>

            </div>

        </dv-full-screen-container>

    </div>

    <script src="/static/lib/jquery.min.js"></script>
    <script>
        var speed,codeDisk;
        $("document").ready(function () {

            $("#range").on("input propertychange", function () {
                $("#range-val").html(($(this).val()))
                codeDisk = ($(this).val());
            });
            $("#speed").on("input propertychange", function () {
                $("#speed-val").html(($(this).val()))
                speed = ($(this).val());
            });
            $("#speed").val(80).trigger("input");
            $("#range").val(2000).trigger("input");

            setInterval("task()", 2000);

            $(".button").click(function (e) {
                var msg = $(e.target).attr("msg");
                switch (msg) {
                    case "model-btn":
                    sendHttp("runModelSwitch", {"modelName":"contest"}, function (res) {
                        if(res=="ok"){
                            addLog("手动刷新连接状态成功");
                        }
                    });
                    break;
                    case "yun-u":
                    sendHttp("cameraControl", {"commandField":"up"}, function (res) {
                        addLog("手动云台摄像头控制成功-向上");
                    });
                    break;
                    case "yun-c":
                    sendHttp("cameraControl", {"commandField":"CENTER"}, function (res) {
                        addLog("手动云台摄像头控制成功-置中");
                    });
                    break;
                    case "yun-d":
                    sendHttp("cameraControl", {"commandField":"DOWN"}, function (res) {
                        addLog("手动云台摄像头控制成功-向下");
                    });
                    break;
                    case "yun-l":
                    sendHttp("cameraControl", {"commandField":"LEFT"}, function (res) {
                        addLog("手动云台摄像头控制成功-左转");
                    });
                    break;
                    case "yun-r":
                    sendHttp("cameraControl", {"commandField":"RIGHT"}, function (res) {
                        addLog("手动云台摄像头控制成功-右转");
                    });
                    break;
                    case "car-u":
                    sendHttp("carControl", {"commandType":"FORWARD","speed":speed,"codeDisk":codeDisk}, function (res) {
                        addLog("手动车辆运动控制成功-前进,速度："+speed+",码盘："+codeDisk);
                    });
                    break;
                    case "car-s":
                    sendHttp("carControl", {"commandType":"STOP","speed":speed,"codeDisk":codeDisk}, function (res) {
                        addLog("手动车辆运动控制成功-停止");
                    });
                    break;
                    case "car-d":
                    sendHttp("carControl", {"commandType":"BACK","speed":speed,"codeDisk":codeDisk}, function (res) {
                        addLog("手动车辆运动控制成功-后退,速度："+speed+",码盘："+codeDisk);
                    });
                    break;
                    case "car-l":
                    sendHttp("carControl", {"commandType":"TURNLEFT","speed":speed,"codeDisk":codeDisk}, function (res) {
                        addLog("手动车辆运动控制成功-左转,速度："+speed+",码盘："+codeDisk);
                    });
                    break;
                    case "car-r":
                    sendHttp("carControl", {"commandType":"TURNRIGHT","speed":speed,"codeDisk":codeDisk}, function (res) {
                        addLog("手动车辆运动控制成功-右转,速度："+speed+",码盘："+codeDisk);
                    });
                    break;
                    case "car-task1":
                    sendHttp("carTask", {"commandType":"TASK1"}, function (res) {
                        addLog("无人车自动驾驶任务一启动！！");
                    });
                    break;
                    case "car-task2":
                    sendHttp("carTask", {"commandType":"TASK2"}, function (res) {
                        addLog("无人车自动驾驶任务二启动！！");
                    });
                    break;
                }
            })
        })

        function task() { 
            sendHttp("carPluginStatus", {}, function (res) {
                $("#connect-msg").html(
                    '<div style="float: left;width: 50%;">连接状况:<span>已连接</span></div>'+
                    '<div style="float: left;width: 50%;">&nbsp;</div>'+
                    '<div style="float: left;width: 50%;">无人车插件:<span>'+(res.driver_plugin_run_status=="stop"?"已停止":"运行中")+'</span></div>'+
                    '<div style="float: left;width: 50%;">智慧交通插件:<span>'+(res.task_plugin_run_status=="stop"?"已停止":"运行中")+'</span></div>'+
                    '<div style="float: left;width: 50%;">串口插件:<span>'+(res.serial_plugin_run_status=="stop"?"已停止":"运行中")+'</span></div>'+
                    '<div style="float: left;width: 50%;">串口状态:<span>'+(res.serial_connection_status==0?"未应答":"已应答")+'</span></div>'
                )
            });
        }

        function sendHttp(url, data = {}, success) {
            $.ajax({
                type: "POST",
                url: "/" + url,
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(data),
                success: function (data) {
                    if (success != null) {
                        success(data)
                    }
                },
                error: function (param) {
                    addLog("访问\"" + url + "\"失败了");
                }
            });
        }

        function addLog(msg){
            $("#log-div").append("<div>"+getCurrentDate(new Date())+"-"+msg+"</div>");
            $('#log-div').scrollTop($("#log-div")[0].scrollHeight);
            if($("#log-div").children().length>100){
                $("#log-div").children()[0].remove();
            }
        }
        function getCurrentDate(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            var min = date.getMinutes();
            var s = date.getSeconds();
            // var str = y + '年' + (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日  ' + (h < 10 ? ('0' +
            //     h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? ('0' + s) : s);
            var str = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? ('0' + s) : s);
            return str;
        }

        var app = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
    <style>
        #dv-full-screen-container {
            background-image: url('/static/img/study-chart-bg.png');
        }

        input[type="range"] {
            border-radius: 15px;
            -webkit-appearance: none;
            height: 20px;
            width: 150px;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            cursor: default;
            height: 50px;
            width: 50px;
            background: none repeat scroll 0 0 rgb(75, 75, 75);
            border-radius: 15px;
            -webkit-box-shadow: 0 -1px 1px black inset;
        }

        .button-3d {
            color: rgb(27, 27, 27);
        }

        .flag-btn {
            font-size: 16px;
            width: 80px !important;
            margin: 10px;
            padding: 5px !important;
        }
    </style>
</body>

</html>